<route lang="json5" type="page">
  {
    "name": "diaryNotebook",
    "layout": "default",
    "style": {
      "disableScroll": true,
      "navigationStyle": "default",
      "enablePullDownRefresh": true,
      "navigationBarBackgroundColor": "#F8F8F8",
      "navigationBarTitleText": "记事本"
    }
  }
</route>

<script setup>
import {
  currentMonth,
  formatter,
  handleAddClick,
  handleChange,
  handleTabsClick,
  maxDate,
  memoRecord,
  minDate,
  onPageLoad,
  selectDate,
  selectDateTimestamp,
  tab,
} from './index'

onLoad(onPageLoad)
</script>

<template>
  <view class="main-page">
    <!-- 日历组件 -->
    <wd-tabs v-model="tab" swipeable custom-class="calendar-tabs" @click="handleTabsClick">
      <block v-for="item in 2" :key="item">
        <wd-tab :title="item === 1 ? `${currentMonth}月` : `${selectDate}日`">
          <wd-calendar-view
            v-model="selectDateTimestamp"
            :panel-height="item === 2 ? 420 : 200"
            :formatter="formatter"
            :show-panel-title="false"
            :type="item === 2 ? 'date' : 'month'"
            :min-date="minDate"
            :max-date="maxDate"
            @change="handleChange"
          />
          <!-- 有数据时显示时间轴 -->
          <view v-if="item === 2 && memoRecord.length > 0" class="px-40rpx">
            <wd-steps :active="memoRecord.length - 1" vertical dot>
              <wd-step v-for="(info, index) in memoRecord" :key="info.id" :title="info.time" :description="info.content">
                <template #title>
                  <wd-text v-if="index <= 2" type="primary" size="28rpx" :text="info.time" />
                  <wd-text v-else type="primary" size="28rpx" :text="info.time" @click="handleAddClick" />
                </template>
                <template v-if="index <= 2" #description>
                  <wd-text size="26rpx" :text="info.content" />
                </template>
              </wd-step>
            </wd-steps>
          </view>

          <!-- 无数据时显示空状态 -->
          <view v-if="item === 2 && memoRecord.length <= 0">
            <wd-status-tip
              image="search"
              tip="暂无记录"
              class="empty-status"
            />
          </view>
        </wd-tab>
      </block>
    </wd-tabs>
    <wd-fab :expandable="true" :draggable="true">
      <template #trigger>
        <wd-button size="medium" icon="edit-1" @click="handleAddClick">
          添加
        </wd-button>
      </template>
    </wd-fab>
  </view>
</template>

<style scoped lang='scss'>
@import url("./index.scss");
</style>
